<template>
  <div class="blog-list-container" ref="container" v-loading="isLoading">
    <ul>
      <li v-for="item in data.rows" :key="item.id">
        <div class="thumb" v-if="item.thumb">
          <RouterLink :to="{
            name:'Detail',
            params:{
              id:item.id,
            }
          }">
            <img v-lazy="item.thumb" :alt="item.title" :title="item.title" />
          </RouterLink>
        </div>
        <div class="main">
          <RouterLink :to="{
            name:'Detail',
            params:{
              id:item.id,
            }
          }">
            <h2>{{ item.title }}</h2>
          </RouterLink>
          <div class="aside">
            <span>日期：{{ formatDate(item.createDate) }}</span>
            <span>浏览：{{ item.scanNumber }}</span>
            <span>评论{{ item.commentNumber }}</span>
            <RouterLink :to="{
              name:'Category',
              params:{
                categoryId:item.category.id,
              }
            }" class="">{{ item.category.name }}</RouterLink>
          </div>
          <div class="desc">
            {{ item.description }}
          </div>
        </div>
      </li>
    </ul>
    <Empty v-if="data.rows.length === 0 && !isLoading" />
    <Pager
      :current="getRouterInfo.page"
      :limit="getRouterInfo.limit"
      :total="data.total"
      :visableNumber="10"
      @changePage="handleChangePage"
    />
  </div>
</template>

<script>
import Pager from "@/components/Pager";
import fetchData from "@/mixins/fetchData.js";
import { getBlogs } from "@/api/blog.js";
import { formatDate } from "@/util/index";
import setScroll from '@/mixins/setScroll';
import Empty from "@/components/Empty";
export default {
  mixins: [fetchData({total:0,rows:[]}),setScroll('container')],
  components: {
    Pager,
    Empty,
  },
  
  methods: {
    async fetchData() {
      return await getBlogs(
        this.getRouterInfo.page,
        this.getRouterInfo.limit,
        this.getRouterInfo.categoryId
      );
    },
    formatDate,
    handleChangePage(newPage){
        const query = {
            page:newPage,
            limit:this.getRouterInfo.limit,
        };
        //判断当前path有没有分类
        if(this.getRouterInfo.categoryId === -1){
            //没有分类
            this.$router.push({name:"Blog",
            query,
            })
        }
        else{
          //有分类
            this.$router.push({
                name:"Category",
                query,
                params:{
                    categoryId:this.getRouterInfo.categoryId,
                },
            })
        }
    },
  },
  computed: {
    //获取路由信息
    getRouterInfo() {
      const categoryId = +this.$route.params.categoryId || -1;
      const page = +this.$route.query.page || 1;
      const limit = +this.$route.query.limit || 10;
      return {
        categoryId,
        page,
        limit,
      };
    },
  },
  watch:{
    //观察路由信息是否变化，根据变化重新获取界面数据data
    //获取$route路由信息，是个函数
    async $route(){
      this.isLoading = true;//加载状态
      this.$refs.container.scrollTop = 0;
      this.data = await this.fetchData();//获取数据
      this.isLoading = false;//取消加载
    }
  }
};
</script>

<style scoped lang="less">
@import "~@/styles/var.less";
.blog-list-container {
  line-height: 1.7;
  position: relative;
  padding: 20px;
  overflow-y: auto;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  scroll-behavior: smooth;
  ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }
}
li {
  display: flex;
  padding: 15px 0;
  border-bottom: 1px solid @gray;
  .thumb {
    flex: 0 0 auto;
    margin-right: 15px;
    img {
      display: block;
      max-width: 200px;
      border-radius: 5px;
    }
  }
  .main {
    flex: 1 1 auto;
    h2 {
      margin: 0;
    }
  }
  .aside {
    font-size: 12px;
    color: @gray;
    span {
      margin-right: 15px;
    }
  }
  .desc {
    margin: 15px 0;
    font-size: 14px;
  }
}
</style>
